<template>
	<!--  border-color="#f4f4f5" -->
	<view class="content">
		<u-form :model="form" ref="uForm" label-width="140">
			<u-form-item label="类型：" :border-bottom="false">
				<u-radio-group v-model="form.type">
					<u-radio v-for="(item, index) in listType" :key="index" :name="item.name">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-line color="#a0cfff" />
			<u-form-item label="收件人：" :border-bottom="false">
				<template>
					<view class="classTag"  @click="form.id ? null : toSelect()">
						<u-tag v-for="(option,index) in addressee" :key="option.id || index" :index="index" :text="option.myClass || option"
							:closeable="tagCloseable" @close="tagClick" shape="circle" type="info" style="margin-left: 10rpx;" />
					</view>
				</template>
				<template v-slot:right>
					<u-icon :name="tagCloseable? 'arrow-right' : ''" size="30" @click="tagCloseable? toSelect() : null"></u-icon>
				</template>
			</u-form-item>
			<u-line color="#a0cfff" />
			<u-form-item label="标题：" :border-bottom="false">
				<u-input v-model="form.title" placeholder="请输入标题"/>
			</u-form-item>
			<u-line color="#a0cfff" />
			<jinEdit placeholder="请输入内容" @editOk="editOk" :uploadFileUrl="uploadFileUrl" :html="form.content"></jinEdit>
		</u-form>
	</view>
</template>

<script>
	import jinEdit from '../../components/jin-edit/jin-edit.vue';
	export default {
		data() {
			return {
				uploadFileUrl: 'https://localhost:7071/files/upload',
				// strHtml: '<p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F01%2F20200401094648_wkftf.thumb.400_0.webp&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637143040&t=ba546695daddfc7e084ba75ee493228c" style="max-width:100%;" width="30%"/><br/></p><p>1.参照图片中的作业进行思考，写一篇800字作文</p><p style="text-align:left;"><a href="https://www.baidu.com/" target="_blank"><font color="#f9963b">百度跳转</font></a></p><iframe src="//player.bilibili.com/player.html?aid=250980252&amp;bvid=BV1rv411g7VN&amp;cid=419550582&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe><p><br/></p><p style="text-align:left;"><a href="https://www.baidu.com/" target="_blank"></a></p>',
				form: {
					type: 1
				},
				listType: [{
						name: '1',
						label: '家庭作业',
					},
					{
						name: '2',
						label: '校内通知',
					},
					{
						name: '3',
						label: '学校公告',
					}
				],
				addressee: [],
				tagCloseable: true
			}
		},
		onLoad(option) {
			if(option.id){
				 this.form.id = option.id
				 this.$myRequest({
					 url: "/notice/edit/"+option.id,
				 }).then(res => {
					 this.form = res.data.data.notice
					 this.addressee = res.data.data.addressee
					 this.tagCloseable = false
				 })
			}
		},
		methods: {
			toSelect() {
				var that = this
				uni.navigateTo({
					url: '/pages/selectNoticeClass/selectNoticeClass',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							that.addressee = data.addressee
							console.log(that.addressee);
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							addressee: that.addressee
						})
					},
				})
			},
			// 点击发布
			editOk(res) {
				this.form.content = res.html
				if(!this.form.id){
					this.form.noticeClasses = this.addressee.map(item => {
						return {classId : item.id, isAll : 1}
					})
					this.form.notice = JSON.parse(JSON.stringify(this.form))
				}
				this.$myRequest({
					url: '/notice/' + (this.form.id ? 'update' : 'save'),
					method: 'POST',
					data: this.form
				}).then(res => {
					uni.showToast({
						title: this.form.id ? '更新成功' : '发布成功'
					})
					setTimeout(() => {
						uni.reLaunch({
						    url: '/pages/notice/notice'
						});
					}, 1500)
				})
			},
			async getClasses() {
				const classes = await this.$myRequest({
					url: "/teacher/listClasses"
				})
				console.log(classes)
				this.listClasses = classes.data.data.map(c => {
					return {
						id: c.id,
						myClass: c.myClass.grade.year + "" + c.myClass.grade.name + "" + c.myClass.name
					}
				})
				this.addressee = this.$u.deepClone(this.listClasses);

			},
			tagClick(index) {
				this.addressee.splice(index, 1)
			}
		},
		components: {
			jinEdit
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 10rpx;
		.classTag{
			width: 550rpx;
			height: 70rpx;
		}
	}
</style>
